import React, {
    PureComponent
} from 'react';

import {
    View,
    Image,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Loading,
    Layout,
    Input,
    Button,
    Dialog,
} from './../../components';

interface Props {
    userActions:any
}

interface State {
    email:string
}

import * as Token from './../../http/token';
import connect from './../../utils/connect';
import * as saveLog from './../../utils/saveLog';
import userAction from './../../state/actions/user';
import * as userTypes from './../../state/types/user';

const message = `We’ve sent password reset instructions to your email address.Check your email for a link to reset your password. If you don't see the email,verify you have entered your email address correctly and check your spam folder.`

@connect({
    userActions:userAction
})
class Forgot extends PureComponent<Props,State> {
    state = {
        email:``
    }

    private _onPasswordChange = (value:string) => {
        this.setState({
            email:value
        })
    }

    get disabled() {
        const {
            email
        } = this.state;
        return !email;
    }

    private onSuccess = () => {
        saveLog.clear();
        Token.unLogin();
        Dialog.alert({
            message:message
        })
    }

    private _onSubmit = async () => {
        const {
            userActions
        } = this.props;

        const {
            email
        } = this.state;

        Loading.show();

        try {
            await userActions[
                userTypes.resetPassword
            ](email);
            this.onSuccess();
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close();
    }

    render() {
        const {
            email
        } = this.state;
        return (
            <Layout title="Forgot password">
                <View style={styles.form}>
                    <Input
                        type="email"
                        value={email}
                        placeholder="Email"
                        onChange={this._onPasswordChange}
                    />
                    <View style={styles.center}>
                        <Button
                            title="Submit"
                            onPress={this._onSubmit}
                            disabled={this.disabled}
                        />
                    </View>
                </View>
            </Layout>
        )
    }
}

export default Forgot;

const styles = StyleSheet.create({
    form:{
        paddingHorizontal:24
    },
    center:{
        paddingTop:40
    },
    iconStyle:{
        marginRight:8
    }
}) as any;